<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="card in statisticsCards" :key="card.title">
      <el-card class="statistics-card" v-loading="loading">
        <div class="card-content">
          <el-icon class="card-icon" :style="{ color: card.color }">
            <component :is="card.icon" />
          </el-icon>
          <div class="card-info">
            <h3>{{ card.title }}</h3>
            <p class="number">{{ card.value }}</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { User, View, Timer, Monitor } from '@element-plus/icons-vue'
import { getVisitorStats } from '@/api/visitor'
import { ElMessage } from 'element-plus'
import type { StatisticsCard } from '@/types'

const loading = ref(false)

const statisticsCards = ref<StatisticsCard[]>([
  {
    title: '总访客数',
    value: '0',
    icon: 'User',
    color: '#409EFF'
  },
  {
    title: '今日访客',
    value: '0',
    icon: 'View',
    color: '#67C23A'
  },
  {
    title: '平均停留时间',
    value: '0分钟',
    icon: 'Timer',
    color: '#E6A23C'
  },
  {
    title: '在线人数',
    value: '0',
    icon: 'Monitor',
    color: '#F56C6C'
  }
])

const fetchStats = async () => {
  loading.value = true
  try {
    const res = await getVisitorStats()
    const { totalVisitors, todayVisitors, averageDuration, onlineUsers } = res.data

    statisticsCards.value[0].value = totalVisitors.toLocaleString()
    statisticsCards.value[1].value = todayVisitors.toLocaleString()
    statisticsCards.value[2].value = `${averageDuration}分钟`
    statisticsCards.value[3].value = onlineUsers.toLocaleString()
  } catch (error) {
    console.error('获取访客统计数据失败:', error)
    ElMessage.error('获取访客统计数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped lang="scss">
.statistics-card {
  margin-bottom: 20px;

  .card-content {
    display: flex;
    align-items: center;

    .card-icon {
      font-size: 48px;
      margin-right: 20px;
    }

    .card-info {
      h3 {
        margin: 0;
        font-size: 16px;
        color: var(--text-color);
      }

      .number {
        margin: 10px 0 0;
        font-size: 24px;
        font-weight: bold;
        color: var(--text-color);
      }
    }
  }
}</style> 